<template>
  <div class="common-layout__manage">
    <div class="header">
      <div>
        <el-select v-model="page.channelId" placeholder="Select">
          <el-option
            v-for="(item, key) in channels"
            :key="key"
            :label="item.content"
            :value="key"
          />
        </el-select>
        <el-select v-model="page.sortType" placeholder="Select">
          <el-option
            v-for="(item, key) in sortType"
            :key="key"
            :label="item"
            :value="key"
          />
        </el-select>
      </div>
    </div>
    <div class="video-list">
      <div v-for="video in videoList.records" :key="video.id">
        <div>
          <div class="video-cover">
            <VideoCover1 :video-info="video"></VideoCover1>
          </div>
          <RouterLink class="link black" :to="`/video/${video.id}`">
            <h4 class="text-hidden__1">{{ video.title }}</h4>
            <p class="text-hidden__2">{{ video.describe }}</p>
            <i>{{ dateConversion(video.createTime) }}</i>
          </RouterLink>
        </div>
        <div>
          <el-button @click="editVideo(video)" :icon="EditPen">编辑</el-button>
          <el-button @click="deleteVideo(video)" type="danger" :icon="Delete"
            >删除</el-button
          >
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="page.pageIndex"
        @current-change="getVideoList"
        :page-size="page.pageSize"
        background
        layout="prev, pager, next"
        :total="videoList.total"
      />
    </div>
  </div>

  <div>
    <el-dialog
      v-model="updateVideoInfo.isShow"
      width="700px"
      align-center
      center
    >
      <UploadEdit
        :type="2"
        :video-info="updateVideoInfo.videoInfo"
        @now-tip="
          () => {
            updateVideoInfo.isShow = false;
          }
        "
      ></UploadEdit>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import store from "@/store/store";
import VideoCover1 from "@/components/VideoCover1.vue";
import videoApi from "@/api/video";
import { Video, PageByUserId } from "@/types/video";
import { PageResp } from "@/types/page";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { dateConversion, successNotify } from "@/utils/common";
import UploadEdit from "../upload/upload-edit/UploadEdit.vue";

const channels = store().channelList;
const sortType = ref({
  1: "投稿时间排序",
  2: "播放数排序",
});
//@ts-ignore
const page = ref(<PageByUserId>{
  userId: store().userInfo.id,
  pageIndex: 1,
  pageSize: 8,
  sortType: "1",
  channelId: "0",
});
const videoList = ref(<PageResp<Video>>{});
const updateVideoInfo = ref(<{ videoInfo?: Video; isShow: boolean }>{
  isShow: false,
});

const getVideoList = async () => {
  const { code, data } = await videoApi.getByUserId(page.value);
  if (code === 0) {
    videoList.value = data;
  }
};

const deleteVideo = (video: Video) => {
  console.log(video);

  ElMessageBox.confirm(`确认删除此视频吗?`)
    .then(async () => {
      const { code, data } = await videoApi.remove(video.id);
      if (code === 0) {
        successNotify(data);
        // 刷新列表
        getVideoList();
      }
    })
    .catch(() => {});
};

const editVideo = (video: Video) => {
  console.log(video);

  updateVideoInfo.value.isShow = true;
  updateVideoInfo.value.videoInfo = video;
};

const watchSortType = watch(
  () => [page.value.sortType, page.value.channelId],
  (val) => {
    getVideoList();
  },
  { immediate: true }
);

onMounted(() => {
  //@ts-ignore
  channels["0"] = { content: "全部分区" };
  getVideoList();
});
onUnmounted(() => {
  watchSortType();
});
</script>

<style lang="scss" scoped>
.common-layout__manage {
  .video-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid rgb(229, 229, 229);

    & > div:first-child {
      display: flex;

      .video-cover {
        width: 200px;
        margin-right: 20px;
      }
    }
  }
}
</style>
